<template>
	<view class="container">
		<!-- 顶部栏 -->
		<view class="tab">
			<view class="tabItem" :class="orderType===0? 'active' :'default' " @click="changeTab(0)">
				提货订单
			</view>
			<view class="tabItem" :class="orderType===1? 'active' :'default' " @click="changeTab(1)">
				补货订单
			</view>
		</view>

		<!-- 放置订单卡片 -->

		<!-- 放置提货订单 -->
		<view class="orderList" v-if="orderType===0">
			<view class="orderCard" v-for="(order,index) in orderList" :key="index">
				<view class="orderTitle">
					<view class="orderReferce">
						<text>订单编号:</text>
						<text class="referceNum">
							{{order.id}}
						</text>
					</view>
					<view class="orderStatus">
						{{getPickUpStatusText(order.serverUsersOutOrdersPayStatus)}}
					</view>
				</view>
				<view class="goodsList" v-for="(goodItem,index) in order.outOrderDetailVos">
					<view class="goodsItem">
						<!-- 商品图片 -->
						<view class="imgContent">
							<image :src="goodItem.ordersDetailProductDetailImg" mode="scaleToFill"></image>
						</view>
						<!-- 商品描述 -->
						<view class="descContent">
							<view class="mainDesc">
								<view class="mainGoodTitle">
									{{goodItem.ordersProductName}}
								</view>
								<view class="priceAndNum">
									<view class="price">
										￥{{caluateDiscount(goodItem.ordersDetailProductDetailPrice)}}
									</view>
									<view class="quantity">
										x{{goodItem.ordersDetailNumber}}
									</view>
								</view>
							</view>
							<view class="additionDesc">
								{{goodItem.ordersDetailProductDetailSpecifications}}
							</view>
						</view>
					</view>
				</view>

				<view class="totalPrice">
					<text>{{(order.serverUsersOutOrdersPayStatus===0||order.serverUsersOutOrdersPayStatus===4)?'应付款':'实付款'}}</text>
					<text class="price">￥{{ Number(order.serverUsersOutOrdersTransportAmount).toFixed(2)   }}</text>
				</view>


				<!-- 卡片按钮操作组 -->
				<view class="operateButtons">
					<view class="buttonPosition">
						<button type="default" class="detail" v-if="order.serverUsersOutOrdersPayStatus==0"
							@click="openConfirmCard(order.id,'确定要取消该订单吗',1)">取消订单</button>
						<button type="default" class="detail" @click="getPickUpDetail(order.id)">查看订单</button>
						<button type="default" class="detail" v-if="order.serverUsersOutOrdersPayStatus==4"
							@click="openConfirmCard(order.id,'确定要删除该订单吗',2)">删除订单</button>
						<button type="default" class="confirm" v-if="order.serverUsersOutOrdersPayStatus==2"
							@click="openConfirmCard(order.id,'您确定要签收该订单吗',3)">去收货</button>
						<button type="default" class="confirm" v-if="order.serverUsersOutOrdersPayStatus==0"
							@click="toPayPickUp(order.id)">去支付</button>
					</view>
				</view>
			</view>
		</view>


		<!-- 放置补货订单 -->
		<view class="orderList" v-if="orderType===1">
			<view class="orderCard" v-for="(order,index) in orderList" :key="index">
				<view class="orderTitle">
					<view class="orderReferce">
						<text>订单编号:</text>
						<text class="referceNum">
							{{order.id}}
						</text>
					</view>
					<view class="orderStatus">
						<text>{{getReplishStatusText(order.serverUserOrdersPayStatus)}}</text>
					</view>
				</view>
				<view class="goodsList" v-for="(goodItem,index) in order.inorderDetailVoList">
					<view class="goodsItem">
						<!-- 商品图片 -->
						<view class="imgContent">
							<image :src="goodItem.ordersDetailProductDetailImg" mode="scaleToFill"></image>
						</view>
						<!-- 商品描述 -->
						<view class="descContent">
							<view class="mainDesc">
								<view class="mainGoodTitle">
									{{goodItem.ordersDetailProductName}}
								</view>
								<view class="priceAndNum">
									<view class="price">
										￥{{caluateDiscount(goodItem.ordersDetailProductDetailPrice) }}
									</view>
									<view class="quantity">
										x{{goodItem.ordersDetailNumber}}
									</view>
								</view>
							</view>
							<view class="additionDesc">
								{{goodItem.ordersDetailProductDetailSpecifications}}
							</view>
						</view>
					</view>
				</view>

				<view class="totalPrice">
					<text>{{(order.serverUserOrdersPayStatus===0||order.serverUserOrdersPayStatus===4)?'应付款':'实付款'}}</text>
					<text class="price">￥{{  Number(order.serverUserOrdersThingAmount).toFixed(2)}}</text>
				</view>


				<!-- 卡片按钮操作组 -->
				<view class="operateButtons">
					<view class="buttonPosition">
						<button type="default" class="detail"
							v-if="order.serverUserOrdersPayStatus==0||order.serverUserOrdersPayStatus==3"
							@click="openConfirmCard(order.id,'确定要取消该订单吗',4)">取消订单</button>
						<button type="default" class="detail" @click="getReplishDetail(order.id)">查看订单</button>
						<button type="default" class="detail" v-if="order.serverUserOrdersPayStatus==4"
							@click="openConfirmCard(order.id,'确定要删除该订单吗',5)">删除订单</button>
						<button type="default" class="confirm" v-if="order.serverUserOrdersPayStatus==0"
							@click="goUpload(order.id,order.serverUserOrdersThingAmount)">去上传</button>
						<button type="default" class="confirm" v-if="order.serverUserOrdersPayStatus==3"
							@click=" reUpload(order.id,order.serverUserOrdersThingAmount)">重新上传</button>
					</view>
				</view>
			</view>
		</view>


		<!-- 当没有订单的时候放置空页面 -->
		<view class="empty" v-if="isEmpty">
			暂无任何相关订单
		</view>

		<!-- 自己封装的弹出框 -->
		<confirmPop :isPopUp="confirmStatus" :title="operateTitle" @cancel="closeConfirmCard()"
			@confirm="handleConfirm()">
		</confirmPop>

		<view @click="closeConfirmCard()">
			<popMask :isShow="confirmStatus"></popMask>
		</view>


	</view>
</template>

<script>
	import * as serviceOrderApi from '@/api/serviceOrder/serviceOrder.js'
	import * as payApi from '@/api/pay/pay.js'
	import confirmPop from '@/components/confirmPop.vue'
	import popMask from '@/components/popMask.vue'
	let lastRequestTime = 0;
	const requestInterval = 1000; // 设置请求的最小间隔时间，例如1000毫秒
	export default {
		components: {
			confirmPop,
			popMask
		},
		data() {
			return {
				// 选择查看的是提货还是补货 提货0 补货1
				orderType: 0,
				//放置所有订单
				orderList: [],
				//放置提货订单
				pickUpOrderList: [],
				//放置补货订单
				replenishOrderList: [],

				// 用来控制确认框的一些参数
				confirmStatus: false,
				//准备取消的订单Id
				operateId: null,
				operateTitle: null,
				operateFlag: null
			};
		},
		computed: {
			isEmpty() {
				return this.orderList.length === 0
			}
		},
		onLoad(options) {
			const paramsStr = options.params || null; // 获取URL查询参数中的params字段
			//接收个人中心传来的订单类型
			if (paramsStr != null) {
				const receivedParams = JSON.parse(paramsStr);

				this.changeTab(receivedParams.flag);

			}


		},
		onShow() {

			
			this.changeTab(this.orderType)


		},
		methods: {
			// 计算折扣
			caluateDiscount(price) {
				if (this.$globalData.userType !== null) {

					if (this.$globalData.userType === 1) {
						return (0.5 * price).toFixed(2)
					} else {
						return (0.4 * price).toFixed(2)
					}
				}
				
			},

			//提货订单部分
			//获取提货订单
			async getPickUpOrderList() {
				const res = await serviceOrderApi.getPickupList();
				
				if (res.data.code === 200) {
					this.orderList = res.data.data
				} else {
					return uni.$showMsg('获取订单失败')
				}
			},

			//用来映射提货状态文字
			//用来根据后台传来的状态码显示不同的文字
			getPickUpStatusText(status) {
				switch (status) {
					case 0:
						return '待支付运费';
					case 1:
						return '待发货';
					case 2:
						return '待收货';
						// 其他状态码的情况...
					case 3:
						return '已完成';
					case 4:
						return '已取消';
					default:
						return '未知状态';
				}

			},

			openConfirmCard(id, title, flag) {
				this.operateId = id;
				this.operateTitle = title;
				this.operateFlag = flag;
				this.confirmStatus = true;
			},

			closeConfirmCard() {
				this.confirmStatus = false;
			},
			handleConfirm() {
				let flag = this.operateFlag;
				if (flag === 1) {
					this.cancelPickUpOrder(this.operateId);
				} else if (flag === 2) {
					this.deletePickUp(this.operateId);
				} else if (flag === 3) {
					this.goToReceiveGoods(this.operateId);
				} else if (flag === 4) {
					this.cancelReplishOrder(this.operateId);
				} else if (flag === 5) {
					this.deleteReplish(this.operateId);
				}
				this.confirmStatus = false;
			},



			// 取消提货订单
			async cancelPickUpOrder(id) {
				const res = await serviceOrderApi.cancelPickup({
					serverUserOutOrdersId: id,
					serverUserOutOrdersCancelReason: ""
				});
				
				if (res.data.code === 200) {
					this.getPickUpOrderList();
				} else {
					return uni.$showMsg('取消订单失败')
				}

			},
			//删除订单
			async deletePickUp(id) {
				const res = await serviceOrderApi.deletePickup(id);
				
				if (res.data.code === 200) {
					this.getPickUpOrderList();
					return uni.$showMsg('删除成功')
				} else {
					return uni.$showMsg('删除失败')
				}
			},
			//去收货
			async goToReceiveGoods(id) {
				const currentTime = new Date().getTime();
				if (currentTime - lastRequestTime < requestInterval) {
					return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
				}
				lastRequestTime = currentTime; // 更新上一次请求时间
				const res = await serviceOrderApi.toReceiveGoods(id);
				
				if (res.data.code === 200) {
					this.getPickUpOrderList();
					return uni.$showMsg('成功收货')
				} else {
					return uni.$showMsg('收货失败')
				}
			},

			//查看提货订单
			async getPickUpDetail(id) {
				uni.$toPage('/subpkg/ServiceProvider/pickUpOrderDetail/pickUpOrderDetail', {
					id: id
				})
			},



			//去支付
			async toPayPickUp(orderId) {
				const currentTime = new Date().getTime();
				if (currentTime - lastRequestTime < requestInterval) {
					return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
				}
				lastRequestTime = currentTime; // 更新上一次请求时间
				const res = await payApi.payCommssion(orderId);
				
				if (res.data.code === 200) {
					let orderResponseData = res.data.data.stringStringMap;
					uni.$WxPay(orderResponseData);
				}
			},



			async getReplishOrderList() {
				const res = await serviceOrderApi.getUserRelishOrders();
				
				if (res.data.code === 200) {
					this.orderList = res.data.data
				} else {
					return uni.$showMsg('获取订单失败')
				}

			},

			// 用来映射补货文字
			//用来根据后台传来的状态码显示不同的文字
			getReplishStatusText(status) {
				switch (status) {
					case 0:
						return '待上传打款凭证';
					case 1:
						return '审核中';
					case 2:
						return '已完成';
						// 其他状态码的情况...
					case 3:
						return '审核未通过';
					case 4:
						return '已取消';
					default:
						return '未知状态';
				}

			},

			// 取消补货订单
			async cancelReplishOrder(id) {
				const res = await serviceOrderApi.cancelReplishOrder({
					serverUserOrdersId: id,
					serverUserOrdersCancelReason: ""
				});
				
				if (res.data.code === 200) {
					this.getReplishOrderList();
				} else {
					return uni.$showMsg('取消订单失败')
				}
			},

			//查看补货订单
			async getReplishDetail(id) {
				const currentTime = new Date().getTime();
				if (currentTime - lastRequestTime < requestInterval) {
					return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
				}
				lastRequestTime = currentTime; // 更新上一次请求时间
				const orderInfo = this.orderList.find(item => {
					return item.id === id
				})
				



				uni.$toPage('/subpkg/ServiceProvider/replishOrderDetail/replishOrderDetail', {
					orderInfo: orderInfo
				})
			},

			//删除订单
			async deleteReplish(id) {
				const res = await serviceOrderApi.deleteReplishOrder(id);
				
				if (res.data.code === 200) {
					uni.$showMsg('删除成功');
					this.getReplishOrderList();
				} else {
					return uni.$showMsg('删除失败')
				}

			},

			//去上传
			async goUpload(id, price) {
				const currentTime = new Date().getTime();
				if (currentTime - lastRequestTime < requestInterval) {
					return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
				}
				lastRequestTime = currentTime; // 更新上一次请求时间

				uni.$toPage('/subpkg/ServiceProvider/publicPayForReplish/publicPayForReplish', {
					serverUserOrders: id,
					totalPrice: price
				})
			},


			//重新上传
			async reUpload(id, price) {
				const currentTime = new Date().getTime();
				if (currentTime - lastRequestTime < requestInterval) {
					return uni.$showMsg('操作过于频繁'); // 这将阻止请求继续执行
				}
				lastRequestTime = currentTime; // 更新上一次请求时间
				uni.$toPage('/subpkg/ServiceProvider/publicPayForReplish/publicPayForReplish', {
					serverUserOrders: id,
					totalPrice: price
				})
			},





			// 补货订单部分
			//获取补货订单


			// 切换tab并且相应的渲染提货或者补货的记录
			async changeTab(type) {
				
				

				this.orderType = type;
				if (this.orderType === 0) {
					this.getPickUpOrderList()
				} else {
					this.getReplishOrderList()
				}
			},




		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		align-items: center;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;

		// 空页面
		.empty {
			position: absolute;
			bottom: 812rpx;
			left: 216rpx;
			font-size: 40rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 57.92rpx;
			color: rgba(116, 116, 116, 1);
			text-align: center;
			vertical-align: top;
		}

		.tab {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 380rpx);

			.default {
				font-size: 32rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: rgba(97, 97, 97, 1);
			}

			.active {
				font-size: 36rpx;
				font-weight: 700;
				letter-spacing: 0rpx;
				line-height: 46.34rpx;
				color: rgba(223, 161, 60, 1);
			}
		}


		// 订单列表
		.orderList {
		
			width: 100%;
			margin-top: 44rpx;
			overflow: auto;


			// 订单卡片
			.orderCard {
				border-radius: 10rpx;
				background: rgba(255, 255, 255, 1);
				margin: 0 20rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				padding-bottom: 30rpx;
				margin-bottom: 20rpx;



				.orderTitle {
					padding-top: 20rpx;
					border-bottom: 0.6rpx solid rgba(229, 229, 229, 1);
					padding-bottom: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.orderReferce {
						font-size: 28rpx;

						.referceNum {
							margin-left: 5rpx;
						}


					}

					.orderStatus {
						font-weight: 700;
						font-size: 28rpx;
						color: rgba(179, 130, 75, 1);
					}
				}

				.goodsList {

					.goodsItem {
						box-sizing: border-box;
						padding: 10rpx 0;

						width: 100%;
						display: flex;
						align-items: center;
						display: flex;


						.imgContent {
							width: 158rpx;
							height: 152rpx;
							border-radius: 8rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 158rpx;
								height: 152rpx;
								border-radius: 8rpx;
							}

						}

						.descContent {

							margin-left: 20rpx;

							.mainDesc {


								width: 500rpx;
								display: flex;
								justify-content: space-between;

								.mainGoodTitle {
									font-size: 32rpx;
									width: 320rpx;
								}

								.priceAndNum {

									margin-right: 12rpx;
									display: flex;
									flex-direction: column;
									text-align: right;

									.price {

										text-align: right;
										font-size: 32rpx;
										color: rgba(0, 0, 0, 1);
									}

									.quantity {

										color: rgba(128, 128, 128, 1);
										font-size: 24rpx;
										text-align: right;
									}

								}


							}

							.additionDesc {
								margin-top: 15rpx;
								color: rgba(128, 128, 128, 1);
								font-size: 24rpx;
							}
						}

					}

				}

				.totalPrice {
					margin-right: 20rpx;
					text-align: right;
					font-size: 32rpx;
					font-weight: 600;

					.price {
						margin-left: 15rpx;
					}
				}

				.operateButtons {
					padding-right: 0;
					margin-top: 28rpx;
					position: relative;
					height: 54rpx;

					.buttonPosition {

						position: absolute;
						right: 0rpx;
						display: flex;
					}


					button {

						margin-left: 30rpx;
						box-sizing: border-box;
						font-size: 24rpx;
						font-weight: 400;
						height: 54rpx;
						opacity: 1;
						border-radius: 26rpx;
						display: flex;
						width: 160rpx;
						align-items: center;
						justify-content: center;
						line-height: 36rpx;
					}

					.confirm {

						color: rgba(255, 255, 255, 1);
						background: rgba(196, 143, 82, 1);
						border: 1rpx rgba(196, 143, 82, 1);
					}

					.detail {
						color: rgba(0, 0, 0, 1);
						border: 1rpx solid rgba(85, 85, 87, 1);

					}
				}

				//anniu
			}



		}

	}
</style>